<!-- 购物车 -->
<template>
  <div class="cart-page">
    <!-- 空购物车 -->
    <div class="empty-cart" v-if="!showCart">
      <img src="https://x.dscmall.cn/static/dist/img/cart-empty.png" alt="" />
      <p>您的购物车还是空空的，快去逛逛吧！</p>
      <button>去逛逛</button>
      <button>去关注</button>
    </div>
    <div class="cart-list" v-else>
      <div class="address">
        <i class="iconfont icon-dingwei"></i>
        <span>河南省郑州市高新区</span>
      </div>

    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      showCart: true,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.cart-page {
  i {
    font-size: 1.6rem;
  }
  .icon-yuanxingxuanzhongfill {
    color: red;
  }

  .empty-cart {
    margin: 1rem;
    background-color: #fff;
    border-radius: 0.5rem;
    text-align: center;
  }
  // 商品相关信息
  .cart-list {
    .address {
      height: 5rem;
      line-height: 5rem;
      padding-left: 1rem;
      font-size: 1.4rem;
    }
    .cart-content {
      .cart-shop {
        > li {
          width: calc(100% - 2rem);
          margin: 1rem;
          background-color: #fff;
          border-radius: 1rem;
          padding-top: 1rem;
          .shop-name {
            width: calc(100% - 2rem);
            margin: 0rem 1rem;
            height: 4rem;
            .shop-select {
              display: flex;
              align-items: center;
              font-size: 1.3rem;
              h3 {
                margin-left: 1rem;
              }
            }
          }
          .cart-goods-list {
            li {
              height: 8rem;
              width: calc(100% - 2rem);
              margin: 0 1rem;
              display: flex;
              align-items: center;
              .goods-content {
                display: flex;
                img {
                  width: 7rem;
                  height: 7rem;
                }
                .goods-info {
                  .goods-title {
                    width: 23rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  .goods-wrap {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .goods-price {
                      font-size: 1.5rem;
                      color: red;
                      font-weight: 700;
                    }
                    .addorminus {
                      display: flex;
                      justify-content: space-between;
                      padding: 1rem;
                      margin-left: 4rem;
                      button:first-child {
                        width: 2rem;
                        height: 2.8rem;
                        border-radius: 0.5rem 0 0 0.5rem;
                      }
                      button:last-child {
                        width: 2rem;
                        height: 2.8rem;
                        border-radius: 0 0.5rem 0.5rem 0;
                      }
                      .numtext {
                        width: 4rem;
                        height: 2.8rem;
                        text-align: center;
                        background-color: #eee;
                        margin: 0 0.3rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>